<!-- 其它 -->
<template>
	<view class="container">
		<view class="list">
			<view class="list-item">
				<text class="label">优惠券</text>
				<text class="value placeholder">暂无优惠券</text>
			</view>
			<view class="list-item">
				<text class="label">备注</text>
				<input class="input" type="text" value="" placeholder="无备注" placeholder-style="color: #999;" />
			</view>
			<view class="list-item show-right-icon">
				<text class="label">配送方式</text>
				<picker @change="shippingTypeChange" :value="shippingTypeIndex" :range="shippingTypeRange"
					range-key="name">
					<text class="value">{{shippingTypeRange[shippingTypeIndex].name}}</text>
				</picker>
			</view>
		</view>

		<view class="list">
			<view class="list-item">
				<text class="label">支付方式</text>
				<text class="value"><text class="iconfont wxpay">&#xe611;</text> 微信支付</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { useSubmitOrderStore } from '../store.js';

	const store = useSubmitOrderStore();

	const shippingTypeRange = ref([
		{ name: '快递', value: '1', isExpress: true },
		{ name: '自提点自提', value: '2', isExpress: false },
	]);
	const shippingTypeIndex = ref(0);

	const shippingTypeChange = (e) => {
		shippingTypeIndex.value = e.detail.value;
		store.SET_USE_EXPRESS(shippingTypeRange.value[shippingTypeIndex.value].isExpress);
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 25rpx 25rpx;
	}

	.list {
		margin-top: 25rpx;
		background-color: white;
		border-radius: 20rpx;
		padding-left: 30rpx;

		&-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding-right: 40rpx;

			&+.list-item {
				border-top: 1rpx solid #E5E5E5;
			}

			&.show-right-icon {
				position: relative;

				&::after {
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translateY(-50%);
					display: block;
					content: '\e601';
					font-family: 'iconfont';
					font-size: 20rpx;
					color: #999;
				}
			}

			.label {
				font-size: 30rpx;
				color: #222222;
			}

			.value {
				font-size: 30rpx;
				color: #222222;

				&.placeholder {
					color: #999;
				}

				.wxpay {
					position: relative;
					top: 4rpx;
					font-size: 40rpx;
					color: #09BB07;
					margin-right: 10rpx;
				}
			}

			.input {
				flex-grow: 1;
				font-size: 30rpx;
				color: #222222;
				text-align: right;
				margin-left: 40rpx;
			}
		}
	}
</style>